<template>
    <view>
		<view class="ruler-item">
			<view class="ruler-item-title">高压</view>
			<view class="ruler-item-result">
				<view style="position: relative;" id="num">
					{{highBloodNow}}<text class="ruler-item-result-unit" :style="unitClass">mmHg</text>
				</view>
			</view>
			<view class="ruler-item-state">正常</view>
			<ruler class="ruler-item-ruler" @scroll="scroll" :scrollStart="scrollStart" :scrollEnd="scrollEnd" :scrollLeft="highBloodLoad" :maginL="maginL"></ruler>
		</view>
		<view class="ruler-item" style="margin-bottom: 20rpx;">
			<view class="ruler-item-title">低压</view>
			<view class="ruler-item-result">
				<view style="position: relative;" >
					{{lowBloodNow}}<text class="ruler-item-result-unit" :style="unitClass">mmHg</text>
				</view>
			</view>
			<view class="ruler-item-state">正常</view>
			<ruler class="ruler-item-ruler" @scroll="scroll" :scrollStart="scrollStart" :scrollEnd="scrollEnd" :scrollLeft="lowBloodLoad" :maginL="maginL"></ruler>
		</view>
		<view class="recoed-item">
			<view class="recoed-item-text">脉搏</view>
			<view class="recoed-item-info">
				<view class="recoed-item-info-unit">--bpm</view>
				<image src="../../../static/icons/jewel/op-icon.png" class="recoed-item-info-arrow"></image>
			</view>
		</view>
		<view class="recoed-item">
			<view class="recoed-item-text">测量时间</view>
			<view class="recoed-item-info">
				<view class="recoed-item-info-unit">2020-10-22  19:30:21</view>
				<image src="../../../static/icons/jewel/op-icon.png" class="recoed-item-info-arrow"></image>
			</view>
		</view>
		<view class="recoed-btn">确定</view>
    </view>
</template>
<script>

export default {
    data() {
        return {
            highBloodNow: 150,//页面显示
            highBloodLoad: 150,//初始值
			lowBloodNow:100,
			lowBloodLoad:100,
            scrollStart: 50,//滚动区域起始值
            scrollEnd: 230,//滚动区域终止值
            maginL: 5,//线间距
			unitClass:{}
        }
    },
	onLoad() {
		setTimeout(()=>{
			uni.createSelectorQuery().select('#num').fields(
				{size: true}, (res) => {
					this.unitClass = {
						'left':res.width+'px',
						'opacity':1
					}
				}
			).exec();
		},100);
	},
    methods: {
        /**
         * 滑动时触发
         */
        scroll(val){
            // this.scrollLeftNow = val;
			
        },
    }
}
</script>

<style lang="scss" scoped>
	page{
		background-color: #efefef !important;
	}
	.ruler-item{
		background-color: #FFFFFF;
		&-title{
			color: #999999;
			font-size: 36rpx;
			padding-top: 40rpx;
			padding-left: 50rpx;
		}
		&-result{
			text-align: center;
			color: #0aac2a;
			font-size: 50rpx;
			display: flex;
			justify-content: center;
			&-unit{
				position: absolute;
				right: 0;
				bottom: 0;
				line-height: 52rpx;
				font-size: 30rpx;
				color: #9a9a9a;
				opacity: 0;
			}
		}
		&-state{
			text-align: center;
			font-size: 36rpx;
			color: #0aac2a;
			margin-bottom: 26rpx;
		}
		&-ruler{
			border-bottom: 1px solid #efefef;
		}
	}
	.recoed-item{
		margin-bottom: 20rpx;
		padding: 20rpx{
			left: 50rpx;
		};
		background-color: #FFFFFF;
		&-text{
			color: #999797;
			font-size: 28rpx;
		}
		&-info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12rpx;
			&-unit{
				font-size: 34rpx;
			}
			&-arrow{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.recoed-btn{
		width: 674rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 20px;
		margin: 0 auto{
			margin-bottom: 20rpx;
		};
		background-color: #0d8b13;
		font-size: 36rpx;
		color: #FFFFFF;
	}
</style>